<template>
    <div class="tapStyle">
        <div class="tapTop">
            <div class="tapTop-content">
                {{ tapName }}
                <div class="tapTop-line" ></div>
            </div>
        </div>
        <div class="tapBody" >
            <div class="tapBody-left" >
                <div class="year-label" >
                    <div class="year-label-image" ></div>
                    <div class="year-label-text" >2009/01/01</div>
                </div>
            </div>
            <div class="tapBody-center" >
                <img class="imgLeft" src="@/assets/multiTime/arrow-left.png" @click="prevBtn" />
                <div class="centerLine" >
                    
                    <div class="timeline" >   
                        <div class="timeline-pointer" ref="timelinePointer">
                            <div class="pointer-label" ref="pointerLabel">2009年全年影像</div>
                        </div>                     
                        <template v-for="(item, index) in axisList"  > 
                            <div class="axis-point" :style="{left: calcFilterOffset(item,index) + '%'}"   @click="handleAxisClick(index)" ></div>
                        </template>
                    </div>
                </div>
                <img class="imgRight" src="@/assets/multiTime/arrow-right.png" @click="nextBtn" />
            </div>
            <div class="tapBody-left" >
                <div class="year-label" >
                    <div class="year-label-image" ></div>
                    <div class="year-label-text" >2019/01/01</div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script setup>

  import { ref, onMounted, computed, onBeforeUnmount, watch,defineProps } from "vue";


  const timelinePointer = ref(null);
  const pointerLabel = ref(null);
    const axisList = [
        {name:'2009年全年影像'},
        {name:'2010年全年影像'},
        {name:'2011年全年影像'},
        {name:'2012年全年影像'},
        {name:'2013年全年影像'},
        {name:'2014年全年影像'},
        {name:'2015年全年影像'},
        {name:'2016年全年影像'},
        {name:'2017年全年影像'},
        {name:'2018年全年影像'},
        {name:'2019年全年影像'},
    ]; // 可以配置的轴线
    let currentIndex = 0;
    const props = defineProps({
        tapName: {
            type: String,
            default: '影像图'
        },
        tapList:{
            type:Array,
            default:[]
        }
    })

  const calcFilterOffset=(item,index)=>{
    const percent = index / (axisList.length - 1) * 98 +1
    return percent
  }

  onMounted(() => {
        updatePointerPosition();
        updatePointerLabel();
  });
  
    // 更新指针位置
    const updatePointerPosition=()=> {
        const axisPoints = document.querySelectorAll('.axis-point');
        const axisPoint = axisPoints[currentIndex];
        const leftPosition = 'calc('+axisPoint.style.left+' - 12px)' ;
        timelinePointer.value.style.left = leftPosition;
        
    }
    // 处理轴线点击事件
    const handleAxisClick=(index)=> {
        currentIndex = parseInt(index);
        updatePointerPosition();
        updatePointerLabel();
    }
    // 更新指针标签
    const updatePointerLabel=()=> {
        pointerLabel.value.textContent = axisList[currentIndex].name;
    }
  //上一项
  const prevBtn=()=>{
    if (currentIndex > 0) {
        currentIndex--;
        updatePointerPosition();
        updatePointerLabel();
    }
  }
  //下一项
  const nextBtn=()=>{
    if (currentIndex < axisList.length - 1) {
            currentIndex++;
            updatePointerPosition();
            updatePointerLabel();
        }
  }
  
  </script>
  
  <style lang="scss" scoped>
    .tapStyle{
        position: absolute;
        width: calc(100% - 700px);
        height: 150px;
        left: 425px;
        bottom: 20px;
        // background: #10202ecc;

        .tapTop{
            height: 26px;
            line-height: 26px;
            text-align: center;

            .tapTop-content {
                color: #ffffff;
                font-size: 16px;
                font-weight: 400;
                font-family: '旁门正道标题体';
                width: 110px;
                background: #10202ecc;
                border-radius: 5px 5px 0px 0px;

                .tapTop-line{
                    width: 82px;
                    height: 1px;
                    background-image: -webkit-gradient(linear, left top, right top, from(#ffffff00), color-stop(50%, #ffffffff), to(#ffffff00));
                    background-image: linear-gradient(90deg, #ffffff00 0%, #ffffffff 50%, #ffffff00 100%);
                    margin: 0 auto;
                }
            }
        }
        .tapBody{
            width: 100%;
            height: 123px;
            background: #10202ecc;
            margin-top: 1px;

            .tapBody-left{
                width: 150px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: left;

                .year-label {
                    line-height: 30px;
                    text-align: center;
                    width: 130px;
                    height: 30px;
                    background-image: url('@/assets/multiTime/year-bg.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    .year-label-image {
                        height: 100%;
                        width: 30px;
                        background-image: url('@/assets/multiTime/year-img.png');
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    .year-label-text {
                        height: 100%;
                        line-height: 30px;
                        width: calc(100% - 30px);
                        text-align: center;
                        color: #ffffff;
                        font-size: 12px;
                        font-weight: 400;
                        font-family: '优设标题黑';
                    }
                }
            }
            .tapBody-center{
                width: calc(100% - 300px);
                height: 100%;
                float: left;
                display: flex;
                align-items: center;
                justify-content: center;

                .imgLeft{
                    width: 24px;
                    height: 24px;
                    float: left;
                    cursor: pointer;
                    margin-right: 6px;
                }
                .imgRight{
                    width: 24px;
                    height: 24px;
                    float: left;
                    cursor: pointer;
                    margin-left: 6px;
                }
                .centerLine{
                    width: calc(100% - 60px);
                    height: 30px;
                    float: left;
                    border: 2px solid #65a2ff;
                    border-radius: 20px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0px 5px;

                    .timeline {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        height: 20px;
                        position: relative;
                        border-radius: 5px;
                        background-color: #65a2ff;
                        border-radius: 10px;
                    

                        .timeline-axis {
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
                            height: 2px;
                            background-color: #ccc;
                            position: relative;
                        }

                        .axis-point {
                            width: 3px;
                            height: 15px;
                            background-color: #fff;
                            position: absolute;
                            cursor: pointer;
                        }

                        .timeline-pointer {
                            width: 24px;
                            height: 24px;
                            background-image: url('@/assets/multiTime/cursor.png');
                            position: absolute;
                            top: -20px;
                            left: 0px;
                            z-index: 10;

                            .pointer-label {
                                position: absolute;
                                top: -20px; /* 标签显示在指针上方 */
                                left: 50%;
                                transform: translateX(-50%);
                                font-size: 12px;
                                font-weight: 400;
                                color: #fff;
                                white-space: nowrap;
                            }
                        }
                    }
                    

                        
                }
            }
            .tapBody-right{
                width: 150px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: left;
                background-color: red;
            }
        }
    }
  </style>
  